<template>
	<view>
		<view class="demo"
			:style="'height:' +  demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom: ' + demo.bottom + 'px;'">
			<view :style="'top:' + demo.top + 'px'">
				<view class="iconfont icon-xiaoxi"></view>
			</view>
			<view class="title_div" @tap="selCourse">
				{{currCourse}}
				<image class="img" src="../../static/invite_guide_arrow.png"></image>
			</view>
		
		</view>
		
		
		
	</view>
	

</template>

<script>
	export default {
		props:["currCourse"],

		data() {
			return {
				demo: {
					top: 0,
					height: 0,
					bottom: 0
				}
				
			}
		},
		methods: {
			selCourse: function(e) {
				//触发父组件获取课程列表方法
                 this.$emit('selCourse');
			}
		},
		created() {
			/*  */

			const res = uni.getSystemInfoSync();
			if (res.platform == "ios" || res.platform == "android") {
				this.demo.top = 0;
				this.demo.height = 40;
				this.demo.bottom = 0;
			} else {
				const demo = uni.getMenuButtonBoundingClientRect()
				this.demo.top = demo.top
				this.demo.height = demo.height
				this.demo.bottom = 5;
			}


		}

	}
</script>

<style>
	.demo {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		font-size: 26rpx;


	}

	.demo .left {
		float: left;
		position: absolute;
		width: max-content;
		height: max-content;
		top: 0;
		bottom: 0;
		left: 20rpx;
		margin: auto;
	}

	.demo .left .iconfont {
		color: #3C3C3C;

	}

	.demo .title_div .img {
		width: 19rpx;
		height: 11rpx;
		margin-left: 10rpx;
	}
</style>
